<template>
  <el-dialog :visible.sync="localVisible" title="报名表单" @close="handleClose">
    <el-form :model="form">
      <el-form-item label="学生ID">
        <el-input v-model="form.student_id"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import axios from 'axios';

export default {
  name: 'SignUpForm',
  props: ['activity', 'visible'],
  data() {
    return {
      form: {
        student_id: '',
        name: '',
        phone: ''
      },
      localVisible: this.visible
    };
  },
  watch: {
    visible(val) {
      this.localVisible = val;
    },
    localVisible(val) {
      this.$emit('update:visible', val);
    }
  },
  methods: {
    handleClose() {
      this.localVisible = false;
    },
    async submitForm() {
      try {
        const response = await axios.get('http://localhost:8080/SignupForm/checkStudentId', {
          params: {
            student_id: this.form.student_id
          }
        });
        if (response.data.code === "200") {
          this.$message.success('报名成功！');
          this.localVisible = false;
          this.$emit('signup-success', {
            message: `您已成功报名活动：${this.activity.title}`,
            date: new Date().toISOString().slice(0, 10) // 当天日期
          });
        } else {
          this.$message.error('学生ID不存在，请重新输入。');
        }
      } catch (error) {
        console.error('报名失败:', error); // 打印错误信息
        this.$message.error('报名失败，请重试。');
      }
    }
  }
};
</script>

<style>
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

.recruitment-activities {
  padding: 20px;
  max-width: 1400px; /* 增加最大宽度 */
  margin: 20px auto 0; /* 调整上边距为20px，其他边距保持 */
}

.page-title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.activity-table {
  width: 100%;
}

.el-table th, .el-table td {
  text-align: center;
}

.el-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 500;
}

.el-button {
  font-size: 14px;
}

.el-menu--inline {
  background-color: #001529 !important;
  color: #fff !important;
}

.el-menu--inline .el-menu-item {
  background-color: #001529 !important;
  padding-left: 20px !important;
  color: #fff !important;
}

.el-menu-item:hover, .el-submenu__title:hover {
  color: #1890ff !important;
}

.el-menu-item.is-active {
  background-color: #1890ff !important;
  border-radius: 4px !important;
  color: #fff !important;
}

.el-menu-item.is-active i, .el-menu-item.is-active .el-tooltip {
  color: #fff !important;
}

.el-header {
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.logo-title {
  margin-left: 10px;
  font-size: 18px;
  color: #1890ff;
  font-weight: bold;
}

.el-aside {
  transition: width 0.3s;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
}

.el-menu-item {
  height: 50px !important;
  line-height: 50px !important;
}

.el-submenu__title {
  height: 50px !important;
  line-height: 50px !important;
}
</style>